<script setup lang="ts">
/**
 * @用途
 * @author bear
 * @创建时间 2025/11/14
 **/
import type { BookmarkDTO, FolderNode } from '@/stores/bookmarkManager'
import { useTabStore } from '@/windows/layoutBrowser/stores/tab'

const tabStore = useTabStore()
const props = defineProps<{
  node: BookmarkDTO
}>()
const emit = defineEmits<{
  (e: 'opened'): void
  (e: 'ondrop', val: { source: FolderNode | BookmarkDTO; target: FolderNode | BookmarkDTO }): void
}>()

const faviconUrl = computed(() => {
  const url = props.node.favicon
  if (url) return url
  try {
    const { origin } = new URL(props.node.link)
    return `${origin}/favicon.ico`
    // return `https://www.google.com/s2/favicons?sz=32&domain=${new URL(props.node.url).hostname}`
  } catch {
    return ''
  }
})

function openInNewTab() {
  tabStore.openTab({ url: props.node.link, title: props.node.title })
  emit('opened')
}

function handleDrop(source: any) {
  emit('ondrop', { source: source.bookmark, target: props.node })
}
</script>

<template>
  <draggable-item
    :accepted-types="['bookmark', 'bookmark-folder']"
    :allowed-edges="['top']"
    :drag-data="node"
    drag-type="bookmark"
    @drop="handleDrop"
  >
    <v-list-item min-height="20" ripple @click="openInNewTab">
      <template #prepend>
        <v-avatar :image="faviconUrl" size="20" />
      </template>
      <v-list-item-title style="user-select: none">{{ node.title || node.link }}</v-list-item-title>
    </v-list-item>
  </draggable-item>
</template>

<style scoped></style>
